精品可视化神器：阿里蚂蚁金服团队开源

公众号：尤而小屋
作者：Peter
编辑：Peter

大家好，我是Peter~

之前写了很多关于可视化神器Plotly的文章，今天想给大家分享另一款可视化神器：PyG2Plot。在介绍PyG2Plot之前我们有必须要先了解下G2Plot。

G2Plot是阿里蚂蚁金服团队开源的一个统计图表库，看看来自官网的介绍：

G2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成，"G2Plot"中的 G2 即意指图形语法 (the Gramma of Graphics)，同时也致敬了ggplot2

特性

• 开箱即用：默认就使用高质量统计图表，帮助开发者使用最小成本就能绘制高质量的统计图表
• 视觉效果佳：图表颜色，视觉效果体现佳，体验优雅
• 响应式图表：致力于解决图表在任何数据和显示尺寸下的基本可读性问题
• 图层化设计方法：在 G2Plot 体系下，图表不仅仅只是各不相关的实例，图层概念的引入提供了多图表组合叠联动，让数据不再孤立

PyG2Plot

由来

相信现在很多人都在使用python做数据分析和可视化展示。那么对于以Python语言为主的同学，如何在进行数据处理和分析之后，再使用G2Plot可视化展示呢？

于是PyG2Plot出现了：将Python和G2Plot完美地结合起来了，不用去看关注那些繁琐的前端代码。附上PyG2Plot的GitHub学习地址：https://github.com/hustcc/PyG2Plot

安装

安装非常简单：直接pip install即可。

pip install pyg2plot  

使用

pyg2plot的使用基本上都是4部曲：

1、导入所需的包

2、指定图表类型的类

3、图表设置和数据填充

4、结果渲染：

• 在Jupyter notebook直接渲染
• 生成本地的HTML文件，
• 直接生成HTML代码

步骤总结为：

# 1. import
from pyg2plot import Plot

# 2. use a plot
line = Plot("Line")

# 3. set_options use G2Plot
line.set_options({ data, ... })

# 4. render
line.render_notebook()

需要重点关注的就是第3点：如何进行设置？

官网指出：set_options API的参数，是完全沿用了G2Plot的配置文档，支持所有的图表、功能、特性，几乎没有任何的改动，我们只需要放在pyg2plot即可使用。

下面是以桑基图的绘制来对比前端的js代码，在notebook环境的代码：

案例展示

先放上2个官网的案例，让读者感受下PyG2plot的魅力：

1、指标卡联动

2、百分比柱状图联动

入门图形

下面通过几个图表的案列来讲解如何使用PyG2Plot进行绘图。

折线图

主要是根据上面的4个步骤来进行，最终我们通过notebook来显示：

# 导入包
from pyg2plot import Plot

# 实例化绘图对象
line = Plot("Line")

# 参数设置和添加数据
line.set_options({
  "height": 300,   # 设置图形的高度
  "width":300,
  "data": [  # 添加数据
    { "year": "2001", "value": 3 },
    { "year": "2002", "value": 4 },
    { "year": "2003", "value": 5.5 },
    { "year": "2004", "value": 7 },
    { "year": "2005", "value": 8.9 },
    { "year": "2006", "value": 10 },
    { "year": "2007", "value": 17 },
    { "year": "2008", "value": 29 },
    { "year": "2009", "value": 33 },
  ],
  "xField": "year",  # 两个轴的设置
  "yField": "value",
  "label": {}
})

# 1、本地生成文件
#line.render("plot.html")

# 2、生成HTML代码
#line.render_html()

# 3、notebook直接渲染
line.render_notebook()

另一个折线图的案例：

from pyg2plot import Plot

line = Plot("Line")

line.set_options({
  "height": 300,   # 设置图形的高度
  "width":300,
  "data": [   # 显示部分数据
  {
    "Date": "2010-01",
    "scales": 1998
  },
  {
    "Date": "2010-02",
    "scales": 1850
  },
  {
    "Date": "2010-03",
    "scales": 1720
  },
  {
    "Date": "2010-04",
    "scales": 1818
  }
],
  "xField": "Date",
  "yField": "scales",
  "padding": 'auto',  # js设置部分
  "annotations": [
        # 低于中位数颜色变化
        {
          "type": 'regionFilter',
          "start": ['min', 'median'],
          "end": ['max', '0'],
          "color": '#F4664A',
        },
        {
          "type": 'text',
          "position": ['min', 'median'],
          "content": '中位数',
          "offsetY": -4,
          "style": {
            "textBaseline": 'bottom',
          },
        },
        {
          "type": 'line',
          "start": ['min', 'median'],
          "end": ['max', 'median'],
          "style": {
            "stroke": '#F4664A',
            "lineDash": [2, 2],
          },
        },
      ],
})

# notebook直接渲染
line.render_notebook()

柱状图

柱状图使用的图形元素是column

from pyg2plot import Plot

column = Plot("Column")

column.set_options({
  "height": 450,   # 设置图形的高度
  "width":300,
  "data": [
    {
    "type": '家具家电',
    "sales": 38,
  },
  {
    "type": '粮油副食',
    "sales": 52,
  },
  {
    "type": '生鲜水果',
    "sales": 61,
  },
  {
    "type": '美容洗护',
    "sales": 145,
  },
  {
    "type": '母婴用品',
    "sales": 48,
  },
  {
    "type": '进口食品',
    "sales": 38,
  }],
    
  "xField": "type",
  "yField": "sales",
  "label": {
    "position": 'middle', 
    "style": {
      "fill": '#FFFFFF',
      "opacity": 0.6,
    },
  },
  "xAxis": {
    "label": {
      "autoHide": True,
      "autoRotate": False,
    },
  },
  "meta": {
    "type": {
      "alias": '类别',
    },
    "sales": {
      "alias": '销售额',
    },
  },
    
})

# 1、本地生成文件
#line.render("plot.html")

# 2、生成HTML代码
#line.render_html()

# 3、notebook直接渲染
column.render_notebook()
#column.render("column.html")

面积图

部分数据的截图展示：

饼图

注意图例的位置设置

from pyg2plot import Plot

data = [
  { "type": "分类一", "value": 127 },
  { "type": "分类二", "value": 225 },
  { "type": "分类三", "value": 88 },
  { "type": "分类四", "value": 115 },
  { "type": "分类五", "value": 210 },
  { "type": "其他", "value": 65 },
]

pie = Plot("Pie")

pie.set_options({
#   "appendPadding": 10,
  "height": 300,   # 设置图形的高度
  "width":200,
  "data": data,
  "angleField": "value",
  "colorField": "type",
  "radius": .75,
  "legend": {
   "layout": 'horizontal',
     # "offsetX": 5,
     # 图例的位置
     # 'top', 'top-left', 'top-right', 'left', 'left-top', 'left-bottom', 
     # 'right', 'right-top', 'right-bottom', 'bottom', 'bottom-left', 'bottom-right'
    "position": 'top'   
  },
  "label": {
    "type": 'inner',
    "offset": '-50%',
    "style": {
      "fontSize": 15,
      "textAlign": 'center',
    },
  }
})

pie.render_notebook()
#pie.render("pie.html")

桑基图

Pyg2plot也是可以绘制桑基图的：

from pyg2plot import Plot

sankey = Plot("Sankey")

sankey.set_options({
    "height": 300,   # 设置图形的高度
    "width":60,
    "data": [   # 改动：数据加上引号
  { "source": '首次打开', "target": '首页 UV', "value": 160 },
  { "source": '结果页', "target": '首页 UV', "value": 40 },
  { "source": '验证页', "target": '首页 UV', "value": 10 },
  { "source": '我的', "target": '首页 UV', "value": 10 },
  { "source": '朋友', "target": '首页 UV', "value": 8 },
  { "source": '其他来源', "target": '首页 UV', "value": 27 },
  { "source": '首页 UV', "target": '理财', "value": 30 },
  { "source": '首页 UV', "target": '扫一扫', "value": 40 },
  { "source": '首页 UV', "target": '服务', "value": 35 },
  { "source": '首页 UV', "target": '蚂蚁森林', "value": 25 },
  { "source": '首页 UV', "target": '跳失', "value": 10 },
  { "source": '首页 UV', "target": '借呗', "value": 30 },
  { "source": '首页 UV', "target": '花呗', "value": 40 },
  { "source": '首页 UV', "target": '其他流向', "value": 45 },
],
    "sourceField": 'source',
    "targetField": 'target',
    "weightField": 'value',
    "nodeWidthRatio": 0.008,
    "nodePaddingRatio": 0.03,
})

# 4、notebook直接渲染
sankey.render_notebook()

玫瑰图

from pyg2plot import Plot

# 数据可以单独设置
data = [
  { "type": "分类一", "value": 127 },
  { "type": "分类二", "value": 225 },
  { "type": "分类三", "value": 88 },
  { "type": "分类四", "value": 115 },
  { "type": "分类五", "value": 210 },
  { "type": "其他", "value": 65 },
]

rose = Plot("Rose")

rose.set_options({
#   "appendPadding": 10,
  "height": 300,   # 设置图形的高度
  "width":200,
  "data": data,
  "xField": 'type',
  "yField": 'value',
  "seriesField": 'type',
  "radius": 0.9,
  "legend": {
    "position": 'bottom',
  }
})

rose.render_notebook()

仪表盘

from pyg2plot import Plot

gauge = Plot("Gauge")

gauge.set_options({
  "height":400,
  "percent": 0.75,
  "range": {
    "ticks": [0, 1 / 3, 2 / 3, 1],
    "color": ['#F4664A', '#FAAD14', '#30BF78'],
  },
  "indicator": {
    "pointer": {
      "style": {
        "stroke": '#D0D0D0',
      },
    },
    "pin": {
      "style": {
        "stroke": '#D0D0D0',
      },
    },
  },
  "statistic": {
    "content": {
      "style": {
        "fontSize": '36px',
        "lineHeight": '36px',
      },
    },
  },
})

gauge.render_notebook()
# gauge.render("rose.html")

水波图

from pyg2plot import Plot

liquid = Plot("Liquid")

liquid.set_options({
  "height":400,
  "percent": 0.25,
  "outline": {
    "border": 4,
    "distance": 8,
  },
  "wave": {
    "length": 128,
  },
})

liquid.render_notebook()

总结

本文重点是介绍了阿里蚂蚁金服团队开源的一款可视化库，这个库其实借鉴了很多另一款国产可视化库pyecharts的设计，写起来涉及到了很多的前端代码，后续多琢磨下。

上面的图形只是pyg2plot能够展示的一部分，看下官网介绍的图形：

• 折线图、面积图、柱状图、条形图、饼图：这些都是常见的图形
• 双轴图、进度图、散点气泡图、玫瑰图、关系图、热力图、桑基图：进阶的图表
• 还有多图层图表、图表联动、分面图，甚至还可以自定义图形

后续也会更新基于PyG2plot的可视化图形绘制，敬请期待！

推荐阅读

尤而小屋，一个温馨的小屋。小屋主人，一手代码谋求生存，一手掌勺享受生活，欢迎你的光临